<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box {
        width: 800px;
        height: 20px;
        border-radius: 4px;
        margin: 100px auto;
        border: 2px solid green;
        position: relative;
    }

    #jinDuTiao {
        height: 20px;
        background: orange;
        border-radius: 4px;
        float: left;
    }

    #baiFenBi {
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        left: 5px;
    }
</style>

<body>
    <div id="box">
        <div id="jinDuTiao" style="width: 0px;"></div>
        <span id="baiFenBi">0%</span>
    </div>
    <!-- 进度条 -->
    <script>
        var timer = setInterval(function () {
            // 每次执行定时器  在原来的宽度基础上加10
            // 获取原来的宽度
            var style = parseInt(jinDuTiao.style.width);

            var curStyle = style + 13


            if (curStyle >= 800) {
                // 当值大于800 的时候，直接让curStyle  等于800
                curStyle = 800;

                // 清除定时器  
                clearInterval(timer)
            }
            // 在原来的基础上 + 10,在赋值给 元素的 宽度
            jinDuTiao.style.width = curStyle + 'px';

            baiFenBi.style.left = curStyle + 2 + 'px';

            baiFenBi.innerHTML = ((curStyle / 800) * 100).toFixed(2) + '%';
        }, 500)
    </script>
</body>

</html>